<template>
	<view>
		<!-- 
		interval 使用 v-bind 绑定js参数
		autoplay是布尔类型，也使用v-bind绑定js的autoplay变量
		 -->
		<swiper indicator-dots indicator-color="#007aff" indicator-active-color="#4cd964" :autoplay="ifautoplay" :interval="interval" vertical>
			<swiper-item>
				<navigator url="/pages/index/scrollview">A</navigator>
			</swiper-item>
			<swiper-item>
				<navigator url="/pages/index/scrollview">A</navigator>
			</swiper-item>
			<swiper-item>
				<navigator url="/pages/index/scrollview">A</navigator>
			</swiper-item>
		</swiper>
	</view>
	<view>
	</view>
</template>

<script setup>
	import {ref} from "vue";
	const interval = 1000; // 轮播间隔
	const ifautoplay = false; // 是否自动播放
</script>

<style>
    swiper {
		/* 滑动区域父元素 */
		/* 
		【vw】:viewport width;
		 这是一种CSS的样式说明，一种相对长度单位，100表示整个可视宽度 ，业绩是100%
		*/
		width: 100vw; 
		/* height和line-height保证文字垂直居中 */
		height: 375rpx;
		/* 
		【rpx】:responsive pixel 是uniapp中的一种特有长度单位，相对的。
		uniapp将屏幕的宽度同一个规定为750rpx，基于该规定的宽高设置。
		比如高度设定为375rpx，就是相对于屏幕宽度的一半。
		在iphone14: 430宽*932高的尺寸下，375rpx就相当于430/2px即215px            
		 */
		line-height: 375rpx;
    }
	
	/**
	swiper-item:nth-child(2n) 是一个 CSS 选择器，用于选中特定的元素，具体含义如下：
	swiper-item：这是一个类名或者标签名，代表要筛选的目标元素集合。例如，如果在 HTML 中有一系列 <div class="swiper-item"> 标签，这个选择器就会从这些元素开始筛选。
	nth-child(2n)：这是一个伪类选择器，用于基于元素在其父元素中的位置来选择元素。
		n 是一个从 0 开始的变量，2n 表示选中所有位置序号为偶数的元素。
		也就是说，当n = 0时，选中第 1 个元素；n = 1 时，选中第 2 个元素；n = 2时，选中第 4 个元素，依此类推。
	把这两部分结合起来，swiper-item:nth-child(2n) 会从所有 swiper-item 类的元素中，挑出那些在其父元素里位置是偶数的元素 ，然后可以给这些被选中的元素应用后续定义的 CSS 样式，像更改背景颜色、字体样式、尺寸大小等。
	*/
	swiper-item:nth-child(2n) {
		background-color: #bababa;
	}
	
	swiper-item {
		/* 子元素,继承宽高 */
		width: 100%;
		height: 100%;
		background-color: grey;
		text-align: center;
		font-size: 36rpx;

	}
	/* uniapp默认情况下图片是 宽320px*高240px;
	此处设置为100%让他继承父元素宽高；
	*/
	navigator {
		width: 100%;
		height: 100%;
	}
	
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
</style>
